<template>
	<view>
		<view class="head_wrap col_center">
			<span>已发送短信验证至</span>
			<span class="phone">{{userInfo.mobile}}</span>
		</view>
		
		<view class="content_wrap" style="margin-top: 20upx;">
			<view class="content row">
				<input type="number" v-model="code" placeholder="输入验证码" class="flex_one" placeholder-class="place-holder"/>
				<span class="time_wrap" v-if="timeCtn != 0">{{timeCtn}}S后重新获取</span>
				<span class="time_wrap get_active" v-else @click="retryAction">重新获取</span>
			</view>
		</view>
		
		
		<view class="content_wrap" >
			<view class="content row_between">
				<input type="number" v-model="pwd" placeholder="请输入6位数字支付密码" maxlength="6" style="width: 100%"
				placeholder-class="place-holder" @input="pwdChange" :password="!pwdOpen" pattern="\d*"/>
				<image :src="(pwdOpen?'../../static/img/pwd_active_icon.png':'../../static/img/pwd_icon.png')" 
					mode="aspectFill" v-if="pwd" @click="openPwd"></image>
			</view>
		</view>
		
		<view class="content_wrap" >
			<view class="content row_between">
				<input type="number" v-model="pwd_sure" placeholder="请再次输入支付密码" maxlength="6" style="width: 100%"
					placeholder-class="place-holder" @input="pwdSureChange" :password="!pwdSureOpen" pattern="\d*"/>
				<image :src="(pwdSureOpen?'../../static/img/pwd_active_icon.png':'../../static/img/pwd_icon.png')" 
					mode="aspectFill" v-if="pwd_sure" @click="openSurePwd"></image>
			</view>
		</view>
		
		
		<view class="bottom_btn row_center" @click="postAction">
			<span class="flex_one" :class="{'active': (pwd && pwd_sure && code)}">提交</span>
		</view>
		
		<div class="modal-mask row_center" v-if="isShowPwd" @touchmove.stop.prevent="moveHandle">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="col update_content_bg pay_wrap">
						<view class="row_center" style="margin: 52upx 0upx;">
							<image src="../../static/img/set_success_icon.png" mode="aspectFill"></image>
							<view class="title">支付密码设置成功</view>
						</view>
						
						<view class="retry_btn" @click="knowAction">我知道了</view>
					</div>
				</div>
			</div>
		</div>
		
		
	</view>
</template>

<script>
	import { BASE_URL,userinfo,setPwd,preset } from '@/utils/api'
	
	export default {
		data() {
			return {
				isActive: false,
				isShowPwd: false,
				userInfo: {},
				code: '',
				timeCtn: 60,
				intervalObj: {},
				pwd: '',
				pwd_sure: '',
				pwdOpen: false,
				pwdSureOpen: false,
				tixian: 0,
				name: '',
				identity: ''
			}
		},
		methods: {
			moveHandle(){},
			openPwd(){
				this.pwdOpen = !this.pwdOpen;
			},
			openSurePwd(){
				this.pwdSureOpen = !this.pwdSureOpen;
			},
			pwdChange(){
				
			},
			pwdSureChange(){
				
			},
			knowAction(){
				this.isShowPwd = false;
				if(this.tixian == 1){
					uni.redirectTo({
						url:'/pages/tixian/tixian'
					})
				}else{
					uni.navigateBack({
						delta:2
					});
				}
				
			},
			async postAction(){
				if(!this.code || this.code.length != 6){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入6位验证码'
					});
					return;
				};
				
				if(!this.pwd || this.pwd.length != 6){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'请输入6位密码'
					});
					return;
				};
				
				if(this.pwd != this.pwd_sure){
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:'两次输入密码不一致'
					});
					return;
				};
				let params = {
					password: this.pwd,
					password2: this.pwd_sure,
					smsCode: this.code,
					realName: this.name?this.name:'',
					cardNo: this.identity?this.identity:''
				};
				let res = await setPwd(params);
				if(res.code == 1){
					this.isShowPwd = true;
				}else if(res.code == -66){
					uni.navigateTo({
						url: '/pages/add_bank/add_bank'
					})
				}else{
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:res.message
					});
				}
			},
			async userinfo(){
				let res = await userinfo();
				if(res.code == 1){
					this.userInfo = res.data;
				}
			},
			async preset(){
				let res = await preset();
				if(res.code == 1){
					this.countDown();
				}
			},
			countDown() {
				let that = this;
			    this.intervalObj = setInterval(function() {
			        that.timeCtn--;
			        if (that.timeCtn <= 0) {
			            that.timeCtn = 0;
			            clearInterval(that.intervalObj);
			        } else {
						
			        }
			
			    }, 1000);
			},
			retryAction(){
				this.timeCtn = 60;
				this.preset();
			}
		},
		onLoad(opt) {
			this.name = opt.name;
			this.identity = opt.identity;
			this.userinfo();
			this.preset();
			this.tixian = opt.tixian;
			
		}
	}
</script>

<style>
	page{background: #F1F1F1;}
.head_wrap{background: #FFFFFF; color: #999999; font-size: 28upx; height: 207upx;line-height: 1.0;}
.head_wrap .phone{font-size: 40upx; color: #333333; margin-top: 29upx; font-weight: bold;}

.content_wrap{padding-left: 27upx; background: #FFFFFF; color: #333333; font-size: 32upx;}
.content_wrap .content{height: 100upx; border-bottom: solid 2upx #E6E6E6; padding-right: 30upx;}
.content_wrap .content image{height: 48upx; width: 48upx; }
.content_wrap .content input{text-align: left;}
.content_wrap .content .time_wrap{text-align: center; width: 220upx; height: 72upx; line-height: 72upx; border-radius: 12upx;background: #CCCCCC;color: #FFFFFF; font-size: 24upx;}
.get_active{font-size: 32upx!important; color: #333333!important; background: #FFCA0A!important;}


.bottom_btn{padding: 0upx 30upx; margin-top: 60upx;}
.bottom_btn span{background: #CCCCCC; color: #FFFFFF; font-size: 32upx; height: 94upx; line-height: 94upx; text-align: center;
	font-weight: bold;border-radius: 12upx;}
.active{background: #FFCA0A!important; color: #333333!important;}

.place-holder{font-size: 32upx; color: #CCCCCC;}

.pay_wrap image{width: 30upx; height: 30upx; margin-right: 20upx;}
.pay_wrap .title{color: #333333; font-size: 32upx;}
.pay_wrap .retry_btn{text-align: center; font-size: 32upx; color: #FFCA0A; padding: 35upx 0upx; width: 100%; border-top: 2upx solid #E6E6E6; line-height: 1;}

</style>
